<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        .box2{
            width: 100px;
            height: 100px;
            margin-left: 200px;
            background-color: blue;
            /* transition: all 2s; */
            /* 
                过渡：
                    - 通过过渡可以指定一个属性发生变化时的切换方式
                    - 通过过渡效果可以创建一些独特的效果
            */
            /* 
                transition-property: 指定要执行过渡效果的属性 
                多个属性间使用，隔开
                如果所偶有属性都需要过渡，则使用 all 关键字
                大部分属性都支持过渡效果，注意过渡时必须是从一个有效值过渡到另一个有效值
            */
            transition-property: all;
            /* transition-duration: 指定过渡效果的持续时间 */
            transition-duration: 2s;
            /* 
                transition-timing-function: 过渡的时序函数
                    指定过渡的执行方式
                    可选值：
                        ease  -  默认值，过渡效果会以缓入缓出方式执行
                        linear  -  过渡效果会以匀速执行
                        ease-in  -  过渡效果会以缓入方式执行
                        ease-out  -  过渡效果会以缓出方式执行
                        ease-in-out  -  过渡效果会以缓入缓出方式执行
                        cubic-bezier(n,n,n,n)  -  自定义过渡效果
                        steps(n,n) 分布执行过渡效果
            */
            transition-timing-function: cubic-bezier(.24, .95, .82, -0.88);
            /* transition-timing-function: steps(5,start); */

            /* transition-delay: 过渡效果的延迟 等待一段时间后再执行 */
        }

        .box3{
            width: 100px;
            height: 100px;
            background-color: orange;
            transition: 2s all ease-in-out;
        }

        .box1:hover div{
            width: 150px;
            height: 150px;
            margin-left: 0px;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>